<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				background-image: url(img/bg.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.di1{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			input{
				width: 100%;
				height: 40px;
				opacity: 0.5;
				font-size: 40px;
				border-bottom: 2px solid black;
				border-top:0px;
				border-left:0px;
				border-right:0px;
				
			}
			 input:focus{
				border-style:solid;
				border-color: red;
				box-shadow: 0 0 15px red;
			}
			.logout{
				position: absolute;
				
			}
			img{
				width: 5rem;
			}
				</style>
	</head>
	<body>
		<div class="di1">
			<input type="text" name="text" placeholder="账号" /><br />
			<input type="password" name="password" placeholder="密码" />
			<button type="button" value="1" class="login"><img src="img/btn_login_n.png" onmousemove="this.src='img/btn_login_p.png'" onmouseout="this.src='img/btn_login_n.png'"/></button>
			<button type="button" value="2" class="logout"><img src="img/btn_logout_n.png" onmousemove="this.src='img/btn_logout_p.png'"  onmouseout="this.src='img/btn_logout_n.png'"/></button>
		</div>
		<script type="text/javascript">
			
			$(function(){
				$("button").click(function(){
					let val=parseInt($(this).val());
				console.log(typeof $(this).val());
				if (val===1) {
					console.log($("input[name='text']").val());
					let text=$("input[name='text']").val();
					let password= $("input[name='password']").val()
					password=parseInt(password);
					if (text==="chh"&&password===123) {
						location.href="index.html";
					}else{
						alert("账号或者密码错误");
					}
				}
				})
			})
		</script>
	</body>
</html>
